<template>
  <div class="user-info-page">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>
      <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
        <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
          <img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"
               @click="onClickGoBack()"/>
        </div>
        <div class="flex-1 flex-center">
          <span style="font-size: 18px; color:#000000">个人资料</span>
        </div>
        <div class="flex-1"></div>
      </div>
    </div>
    <div class="user-info-container" :style="{'padding-top':titleH + statusH + 'px'}">
      <div class="user-info-top flex-center">
        <div class="avatar-box flex-center" @click="handleUpdateUserAvatar">
          <span v-if="!user.avatar">上传头像</span>
          <img v-else :src="user.avatar_url"/>
        </div>
      </div>
      <div class="item-row flex-row-space-between flex-row-v-center">
        <span class="item-name">昵称</span>
        <div class="flex-row-v-center">
          <input class="item-value" v-model="user.nickname" placeholder="请输入昵称" placeholder-style="color: #afafaf"/>
          <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        </div>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center">
        <span class="item-name">年龄</span>
        <div class="flex-row-v-center">
          <picker @change="bindPickerChange('age', $event)" :value="age" :range="ageArray">
            <view class="item-value">
              {{ageIndex ? ageArray[ageIndex] : '请选择'}}
            </view>
          </picker>
          <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        </div>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center">
        <span class="item-name">性别</span>
        <div class="flex-row-v-center">
          <picker @change="bindPickerChange('sex', $event)" :value="user.gender" :range="sexArray">
            <view class="item-value">
              {{sexIndex ? sexArray[sexIndex] : '请选择'}}
            </view>
          </picker>
          <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        </div>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center">
        <span class="item-name">地区</span>
        <div class="flex-row-v-center">
          <picker mode="region" :value="region" @change="bindRegionChange">
            <span class="item-value" v-if="region[0]">{{region[0]}} {{region[1]}} {{region[2]}}</span>
            <span class="item-value" v-else>请选择</span>
          </picker>
          <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        </div>
      </div>
      <div class="item-line"></div>
      <div class="item-row flex-row-space-between flex-row-v-center">
        <span class="item-name">我的地址</span>
        <div class="flex-row-v-center">
          <input class="item-value" v-model="user.address" placeholder="请输入详细地址" placeholder-style="color: #afafaf"/>
          <img class="item-arrow" src="/static/assets/img/icon_arrow.png"/>
        </div>
      </div>
      <div class="item-line"></div>
      <div class="flex-center">
        <div class="btn-save" @click="updateUserInfo">保存</div>
      </div>
    </div>
  </div>
</template>

<script>
  import navbar from '@/components/navbar'
  import Core from 'core'
  import global from 'global'
  import Common from 'common'

  export default {
    components: {
      navbar
    },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,

        user: {},
        ageArray: [],
        age: 23,
        ageIndex: '',

        sexArray: ['未知', '男', '女'],
        sexIndex: '',
        region: ['', '', '']
      }
    },

    onLoad () {
      let arr = []
      for (let i = 1; i <= 100; i++) {
        arr.push(i)
      }
      this.ageArray = arr

      this.user = Core.Data.getUser()
      this.sexIndex = this.user.gender
      if (this.user.province && this.user.province.indexOf('省') <= -1) {
        this.user.province = this.user.province + '省'
      }

      if (this.user.city && this.user.city.indexOf('市') <= -1) {
        this.user.city = this.user.city + '市'
      }

      this.region = [this.user.province, this.user.city, this.user.county]
      this.age = Core.Util.getDiffDate(this.user.birthday, Core.Util.getTodayBegin())
      this.ageIndex = this.age
    },

    methods: {
      onClickGoBack () {
        Core.Util.goBack()
      },

      handleUpdateUserAvatar () {
        let $this = this
        wx.chooseImage({
          count: 1,
          success: function (res) {
            let tempFilePaths = res.tempFilePaths
            wx.showLoading({
              title: '加载中'
            })
            wx.uploadFile({
              url: Core.Const.NET.FILE_UPLOAD_END_POINT,
              filePath: tempFilePaths[0],
              name: 'file',
              success: function (res) {
                wx.hideLoading()
                if (res.statusCode == 200 && res.data) {
                  let parseData = JSON.parse(res.data)
                  $this.user.avatar = parseData.data.file_url
                  $this.user.avatar_url = parseData.data.file_url
                }
              },
              fail (err) {
                Core.Util.showTip('', err.errMsg)
              }
            })
          },
          fail: function (err) {
            console.error('图片选择失败', err)
          }
        })
      },

      bindPickerChange (t, e) {
        switch (t) {
          case 'age':
            this.age = e.mp.detail.value
            this.ageIndex = e.mp.detail.value
            break
          case 'sex':
            this.user.gender = e.mp.detail.value
            this.sexIndex = e.mp.detail.value
            break
          default:
            break
        }
      },

      bindRegionChange (e) {
        this.region = e.mp.detail.value
      },

      updateUserInfo () {
        let avatar = this.user.avatar
        let nickname = this.user.nickname
        let birthday = Core.Util.dateAgo(this.age, 0, 0)
        let gender = this.user.gender
        let province = this.region[0]
        let city = this.region[1]
        let county = this.region[2]
        let address = this.user.address

        this._updateUserInfo(avatar, nickname, birthday, gender, province, city, county, address, () => {
          this._getUserInfo((res) => {
            this.user = res.user
            Core.Data.setUser(this.user)
            Core.Util.goBack()
          })
        })
      },

      _updateUserInfo (avatar, nickname, birthday, gender, province, city, county, address, callback) {
        Core.Api.User.updateUserInfo(avatar, nickname, birthday, gender, province, city, county, address)
          .then(res => {
            callback(res)
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getUserInfo (callback) {
        Core.Api.User.getUserInfo()
          .then(res => {
            callback(res)
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-info-page {
    width: 100%;
    height: 100%;
    position: relative;

    .nav-bar {
      background: #FFFFFF;
    }

    .user-info-container {
      width: 100%;

      .user-info-top {
        width: 100%;
        height: 146px;
        background: #F5F5F5;

        .avatar-box {
          width: 82px;
          height: 82px;
          border: 2px solid #FFFFFF;
          border-radius: 41px;
          background: #FFFFFF;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
          span {
            color: #939393;
            font-size: 12px;
          }
        }
      }

      .item-row {
        width: 100%;
        height: 55px;
        background: #FFFFFF;
        padding-left: 13px;
        padding-right: 17px;

        .item-name {
          width: 80px;
          font-size: 16px;
          color: #313131;
        }
        .item-value {
          color: #565656;
          font-size: 14px;
          text-align: right;
        }
        .item-arrow {
          width: 7px;
          height: 13px;
          margin-left: 11px;
        }
      }

      .item-line {
        width: calc(100% - 30px);
        margin-left: 13px;
        height: 1px;
        background: #F4F4F4;
      }

      .btn-save {
        width: 119px;
        height: 37px;
        margin-top: 56px;
        color: #FFFFFF;
        font-size: 16px;
        border-radius: 18px;
        text-align: center;
        line-height: 37px;
        background: #0EC5A9;
      }

    }
  }
</style>
